import { listFestivalAndHoliday } from '@/services/api/api-home';
import { Card, Modal, Space, Image, Drawer } from 'antd';
import React, { useEffect, useState } from 'react';
import './calendarModule.less'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation } from 'swiper/modules';
import RcResizeObserver from 'rc-resize-observer';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
const Calendar: React.FC = () => {

  const [calendarList, setCalendarListState] = useState<HomeData.FestivalAndHoliday[]>([])
  const [isDrawerOpen, setisDrawerOpen] = useState(false);
  const [responsive, setResponsive] = useState(1);
  const showDrawer = () => {
    setisDrawerOpen(true);
  };

  const handleCancel = () => {
    setisDrawerOpen(false);
  };
  useEffect(() => {
    getCalendarList()
  }, [])
  const getCalendarList = async () => {
    const res = await listFestivalAndHoliday()
    if (res.code === 0) {
      setCalendarListState(res.data)
    }
  }
  return (
    <>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width > 1600 ? 2 : (offset.width < 1500 ? 0 : 1));
        }}
      >
        <Drawer open={isDrawerOpen} closable footer={null} onClose={handleCancel}>

        </Drawer >
        <div style={{ width: '100%', marginBottom: 10 }}>

          <Swiper
            spaceBetween={10}
            slidesPerView={responsive === 1 ? 6 : (responsive === 2 ? 10 : 4)}
            navigation={true}
            modules={[Navigation]}
            onSlideChange={() => console.log('slide change')}
            onSwiper={(swiper) => console.log(swiper)}
          >
            {calendarList.map((item, index) => (
              <SwiperSlide >
                <Card key={index} hoverable style={{ minWidth: 220, flex: '0 0 auto', margin: 10 }} onClick={showDrawer}>
                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      <span>{item.name}</span>
                      <span style={{ color: '#999999' }}>{item.date}</span>
                    </div>
                    <div style={{ textAlign: 'center', marginLeft: 15 }}>
                      <div style={{ display: 'flex', textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
                        {Number(item.distance) == 1 && <span style={{ width: 12, fontSize: 14, fontWeight: 'bold', marginRight: 5, color: '#999999' }}>明天</span>}
                        {Number(item.distance) == 0 && <span style={{ width: 12, fontSize: 14, fontWeight: 'bold', marginRight: 5, color: '#999999' }}>今天</span>}
                        {Number(item.distance) >= 2 && <span style={{ fontSize: 24, fontWeight: 'bold', marginRight: 5, color: '#999999' }}>{item.distance}</span>}
                        {Number(item.distance) >= 2 && <div style={{ width: 12, fontSize: 12, color: '#999999' }}>天后</div>}
                      </div>
                    </div>
                  </div>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>

        </div>
      </RcResizeObserver>
    </>
  );
};

export default Calendar;